<template>
  <div class="elevator-detail" v-if="elevatorData">
    <el-row :gutter="12">
      <!-- 左侧：实时温度面积图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <div class="chart-title-section">
                <span class="chart-title">实时温度分布</span>
                <div class="monitor-time" v-if="monitorTime">
                  <i class="el-icon-time"></i>
                  监测时间: {{ formatMonitorTime(monitorTime) }}
                </div>
              </div>
              <el-button size="mini" @click="refreshRealtimeData">刷新</el-button>
            </div>
          </template>
          <div id="realtimeChart" style="height: 220px;"></div>
        </el-card>
      </el-col>

      <!-- 右侧：温度趋势图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span class="chart-title">温度趋势</span>
              <div class="time-controls">
                <el-radio-group v-model="timeType" size="mini" @change="handleTimeTypeChange">
                  <el-radio-button label="hour">按小时</el-radio-button>
                  <el-radio-button label="day">按天</el-radio-button>
                </el-radio-group>
                <el-button size="mini" @click="loadTrendData">刷新</el-button>
              </div>
            </div>
          </template>
          <div id="trendChart" style="height: 220px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getTemperatureTrend } from '@/api/project/building';

export default {
  name: 'ElevatorDetail',
  props: {
    elevatorData: {
      type: Object,
      required: true
    },
    detailData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      timeType: 'hour',
      realtimeChart: null,
      trendChart: null,
      trendData: null,
      currentChartData: [],
      monitorTime: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts();
      this.loadRealtimeChartData();
    });
  },
  beforeDestroy() {
    if (this.realtimeChart) {
      this.realtimeChart.dispose();
    }
    if (this.trendChart) {
      this.trendChart.dispose();
    }
  },
  methods: {
    initCharts() {
      this.initRealtimeChart();
      this.initTrendChart();
    },

    initRealtimeChart() {
      const chartDom = document.getElementById('realtimeChart');
      if (!chartDom) return;

      this.realtimeChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          borderColor: '#ccc',
          borderWidth: 1,
          textStyle: {
            color: '#333',
            fontSize: 12
          },
          formatter: (params) => {
            let result = `<div style="font-weight: bold; margin-bottom: 8px;">${params[0].name}</div>`;

            params.forEach(param => {
              const value = Number(param.value).toFixed(2);
              result += `
                <div style="display: flex; align-items: center; margin: 4px 0;">
                  <span style="display: inline-block; width: 8px; height: 8px; background: ${param.color}; border-radius: 50%; margin-right: 6px;"></span>
                  <span>${param.seriesName}: <b>${value}°C</b></span>
                </div>
              `;
            });

            const extraData = this.getExtraDataByFloorName(params[0].name);
            if (extraData) {
              result += `<div style="margin-top: 6px; border-top: 1px dashed #eee; padding-top: 4px;">
                <div>📍 米标: ${extraData.meter}m</div>
                <div>📅 时间: ${extraData.statTime ? new Date(extraData.statTime).toLocaleString() : '未知'}</div>
                <div>🔧 设备: ${extraData.deviceNo || 'N/A'}-📺 通道: ${extraData.channelNo || 'N/A'}</div>
              </div>`;
            }

            return result;
          }
        },
        legend: {
          data: ['最高温度', '平均温度', '最低温度'],
          top: 'top',
          right: '5%',
          textStyle: {
            fontSize: 10
          },
          itemHeight: 8,
          itemWidth: 8,
          itemGap: 4
        },
        xAxis: {
          type: 'category',
          name: '楼层位置',
          axisLabel: {
            fontSize: 10,
            rotate: 45,
            margin: 10
          },
          nameTextStyle: {
            fontSize: 11,
            fontWeight: 'bold'
          },
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          name: '温度 (°C)',
          min: 20,
          max: 100,
          axisLabel: {
            fontSize: 10
          },
          nameTextStyle: {
            fontSize: 11,
            fontWeight: 'bold'
          },
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '最高温度',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 4,
            lineStyle: {
              width: 2,
              color: '#f5222d'
            },
            itemStyle: {
              color: '#f5222d'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: 'rgba(245, 34, 45, 0.6)'},
                {offset: 1, color: 'rgba(245, 34, 45, 0.1)'}
              ])
            },
            emphasis: {
              focus: 'series',
              itemStyle: {
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: 'rgba(245, 34, 45, 0.5)'
              }
            }
          },
          {
            name: '平均温度',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 4,
            lineStyle: {
              width: 2,
              color: '#faad14'
            },
            itemStyle: {
              color: '#faad14'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: 'rgba(250, 173, 20, 0.6)'},
                {offset: 1, color: 'rgba(250, 173, 20, 0.1)'}
              ])
            },
            emphasis: {
              focus: 'series',
              itemStyle: {
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: 'rgba(250, 173, 20, 0.5)'
              }
            }
          },
          {
            name: '最低温度',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 4,
            lineStyle: {
              width: 2,
              color: '#1890ff'
            },
            itemStyle: {
              color: '#1890ff'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: 'rgba(24, 144, 255, 0.6)'},
                {offset: 1, color: 'rgba(24, 144, 255, 0.1)'}
              ])
            },
            emphasis: {
              focus: 'series',
              itemStyle: {
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: 'rgba(24, 144, 255, 0.5)'
              }
            }
          }
        ],
        grid: {
          left: '1%',
          right: '8%',
          bottom: '1%',
          top: '12%',
          containLabel: true
        }
      };

      this.realtimeChart.setOption(option);
    },

    initTrendChart() {
      const chartDom = document.getElementById('trendChart');
      if (!chartDom) return;

      this.trendChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          borderColor: '#ccc',
          borderWidth: 1,
          textStyle: {
            fontSize: 12
          },
          formatter: (params) => {
            let result = `<div style="font-weight: bold; margin-bottom: 8px;">${params[0].axisValue}</div>`;
            params.forEach(param => {
              const value = Number(param.value).toFixed(2);
              result += `
                <div style="display: flex; align-items: center; margin: 4px 0;">
                  <span style="display: inline-block; width: 8px; height: 8px; background: ${param.color}; border-radius: 50%; margin-right: 6px;"></span>
                  <span>${param.seriesName}: <b>${value}°C</b></span>
                </div>
              `;
            });
            return result;
          }
        },
        legend: {
          type: 'scroll',
          pageTextStyle: {
            color: '#666'
          },
          pageIconColor: '#666',
          pageIconInactiveColor: '#ccc',
          textStyle: {
            fontSize: 10
          },
          itemHeight: 10,
          itemWidth: 10,
          itemGap: 6,
          top: 'top',
          right: '5%',
          left: '5%'
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            fontSize: 10,
            rotate: this.timeType === 'hour' ? 45 : 0
          },
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '温度 (°C)',
          min: 20,
          max: 100,
          axisLabel: {
            fontSize: 10
          },
          nameTextStyle: {
            fontSize: 11,
            fontWeight: 'bold'
          },
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0',
              type: 'dashed'
            }
          }
        },
        series: [],
        grid: {
          left: '1%',
          right: '8%',
          bottom: '1%',
          top: '15%',
          containLabel: true
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100
          }
        ]
      };

      this.trendChart.setOption(option);
    },

    loadRealtimeChartData() {
      if (!this.realtimeChart || !this.detailData?.realtimeChartData) return;

      const chartData = this.detailData.realtimeChartData;

      if (chartData.seriesData && chartData.seriesData.length > 0) {
        this.monitorTime = chartData.seriesData[0].statTime;
      }

      const xAxisData = [];
      const maxTempData = [];
      const avgTempData = [];
      const minTempData = [];

      chartData.seriesData.forEach((item) => {
        if (item.minTemperature !== undefined && item.maxTemperature !== undefined) {
          const floorName = item.floorName || `${item.meter}m`;
          xAxisData.push(floorName);

          const minTemp = Number(item.minTemperature).toFixed(2);
          const maxTemp = Number(item.maxTemperature).toFixed(2);
          const avgTemp = item.avgTemperature ? Number(item.avgTemperature).toFixed(2) :
            ((Number(item.minTemperature) + Number(item.maxTemperature)) / 2).toFixed(2);

          maxTempData.push(Number(maxTemp));
          avgTempData.push(Number(avgTemp));
          minTempData.push(Number(minTemp));
        }
      });

      const option = {
        xAxis: {
          data: xAxisData
        },
        series: [
          {
            name: '最高温度',
            data: maxTempData
          },
          {
            name: '平均温度',
            data: avgTempData
          },
          {
            name: '最低温度',
            data: minTempData
          }
        ]
      };

      this.realtimeChart.setOption(option);
      this.currentChartData = chartData.seriesData;

      if (this.monitorTime) {
        this.loadTrendData();
      }
    },

    formatMonitorTime(timeString) {
      if (!timeString) return '';
      const date = new Date(timeString);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
    },

    getExtraDataByFloorName(floorName) {
      if (!this.currentChartData) return null;
      return this.currentChartData.find(item =>
        (item.floorName || `${item.meter}m`) === floorName
      );
    },

    async loadTrendData() {
      if (!this.trendChart || !this.elevatorData || !this.monitorTime) {
        if (!this.monitorTime) {
          this.$message.warning('请等待实时数据加载完成');
          return;
        }
        return;
      }

      try {
        const params = {
          lcId: this.elevatorData.lcId,
          lcCode: this.elevatorData.lcCode,
          timeType: this.timeType,
          startTime: this.getStartTime(),
          endTime: this.getEndTime()
        };

        console.log('加载趋势数据参数：', params);

        const response = await getTemperatureTrend(params);
        if (response.code === 200) {
          this.trendData = response.data;
          this.updateTrendChart();
        } else {
          this.$message.error('加载趋势数据失败');
        }
      } catch (error) {
        console.error('加载趋势数据失败:', error);
        this.$message.error('加载趋势数据失败');
      }
    },


    updateTrendChart() {
      if (!this.trendChart || !this.trendData?.trendChartData) return;

      const trendChartData = this.trendData.trendChartData;
      let timeLabels = trendChartData.timeLabels || [];
      const meterData = trendChartData.meterData || [];

      // 对时间标签进行排序
      timeLabels = this.sortTimeLabels(timeLabels, this.timeType);

      // 根据时间类型简化时间标签格式
      timeLabels = this.simplifyTimeLabels(timeLabels, this.timeType);

      console.log('处理后的时间标签:', timeLabels);
      console.log('楼层数据:', meterData);

      // 处理图例名称：补位并排序
      const processedMeterData = this.processMeterDataForDisplay(meterData);

      // 生成颜色序列
      const colors = this.generateColors(processedMeterData.length);

      const series = processedMeterData.map((meter, index) => {
        // 确保温度数据是数字类型
        const temperatureValues = meter.temperatureValues.map(value =>
          Number(Number(value).toFixed(2))
        );

        // 判断该曲线是否有数据达到60度以上
        const hasHighTemperature = temperatureValues.some(value => value >= 60);

        return {
          name: meter.displayName,
          type: 'line',
          smooth: true,
          data: temperatureValues,
          symbolSize: 2,
          // 根据温度条件设置线条样式：60度以上的正常显示，其他的灰掉
          lineStyle: {
            width: hasHighTemperature ? 1.5 : 1,
            color: hasHighTemperature ? colors[index] : '#ccc',
            type: hasHighTemperature ? 'solid' : 'dashed'
          },
          itemStyle: {
            color: hasHighTemperature ? colors[index] : '#ccc'
          },
          // 控制默认显示状态：60度以上的显示，其他的隐藏
          show: hasHighTemperature,
          emphasis: {
            focus: 'series',
            itemStyle: {
              borderWidth: 2,
              shadowBlur: 8,
              shadowColor: colors[index]
            }
          }
        };
      });

      const option = {
        legend: {
          data: series.map(s => s.name),
          // 添加图例选择变化事件处理
          selected: (() => {
            const selected = {};
            series.forEach(s => {
              selected[s.name] = s.show; // 使用series中定义的show属性
            });
            return selected;
          })()
        },
        xAxis: {
          data: timeLabels,
          axisLabel: {
            rotate: this.timeType === 'hour' ? 45 : 0,
            // 添加间隔显示，避免标签重叠
            interval: this.timeType === 'hour' ? (timeLabels.length > 12 ? 'auto' : 0) : 0
          }
        },
        series: series
      };

      this.trendChart.setOption(option);

      // 添加图例点击事件处理，让用户可以手动显示/隐藏曲线
      this.trendChart.off('legendselectchanged');
      this.trendChart.on('legendselectchanged', (params) => {
        const selected = params.selected;
        // 更新series的show状态
        const updatedSeries = series.map(s => {
          return {
            ...s,
            show: selected[s.name] !== undefined ? selected[s.name] : s.show
          };
        });

        this.trendChart.setOption({
          series: updatedSeries
        });
      });
    },

// 根据时间类型简化时间标签格式
    simplifyTimeLabels(timeLabels, timeType) {
      return timeLabels.map(label => {
        // 按小时统计：只保留时间部分 "07:03"
        if (timeType === 'hour') {
          if (label.includes(' ') && label.includes(':')) {
            // 格式如 "10-23 07:03" -> 提取时间部分 "07:03"
            const parts = label.split(' ');
            if (parts.length >= 2) {
              const timePart = parts[parts.length - 1]; // "07:03"
              if (timePart.includes(':')) {
                return timePart;
              }
            }
          } else if (label.includes(':')) {
            // 如果已经是时间格式，直接返回
            return label;
          }
        }
        // 按天统计：转换为 "日-小时" 格式 "22-21"
        else if (timeType === 'day') {
          if (label.includes(' ') && label.includes('-') && label.includes(':')) {
            // 格式如 "10-22 21:00" -> 提取日期和小时，转换为 "22-21"
            const parts = label.split(' ');
            if (parts.length >= 2) {
              const datePart = parts[0]; // "10-22"
              const timePart = parts[1]; // "21:00"

              // 提取日期和小时
              const dateParts = datePart.split('-');
              const timeParts = timePart.split(':');

              if (dateParts.length >= 2 && timeParts.length >= 1) {
                const day = dateParts[dateParts.length - 1]; // 取最后一个作为日 "22"
                const hour = timeParts[0]; // 小时 "21"
                return `${day}-${hour}`;
              }
            }
          } else if (label.includes('-') && label.includes(':')) {
            // 格式如 "10-22-21:00" 或其他变体
            const parts = label.split('-');
            if (parts.length >= 3) {
              const day = parts[parts.length - 2]; // 倒数第二部分作为日 "22"
              const hourPart = parts[parts.length - 1]; // 最后一部分 "21:00"
              const hour = hourPart.split(':')[0]; // 提取小时 "21"
              return `${day}-${hour}`;
            }
          }
        }

        // 如果无法解析，返回原标签
        return label;
      });
    },

// 对时间标签进行排序（根据时间类型使用不同的排序逻辑）
    sortTimeLabels(timeLabels, timeType) {
      return [...timeLabels].sort((a, b) => {
        // 按小时统计：按时间排序
        if (timeType === 'hour') {
          const getMinutes = (timeStr) => {
            // 提取时间部分
            let timePart = timeStr;
            if (timeStr.includes(' ')) {
              const parts = timeStr.split(' ');
              timePart = parts[parts.length - 1];
            }

            const [hours, minutes] = timePart.split(':').map(Number);
            return (hours || 0) * 60 + (minutes || 0);
          };

          return getMinutes(a) - getMinutes(b);
        }
        // 按天统计：按 "日-小时" 格式排序
        else if (timeType === 'day') {
          const getSortValue = (timeStr) => {
            // 处理 "22-21" 格式
            if (timeStr.includes('-') && !timeStr.includes(':') && timeStr.length <= 5) {
              const [day, hour] = timeStr.split('-').map(Number);
              return (day || 0) * 100 + (hour || 0);
            }

            // 处理旧格式，保持向后兼容
            if (timeStr.includes(' ') && timeStr.includes('-') && timeStr.includes(':')) {
              const parts = timeStr.split(' ');
              const datePart = parts[0]; // "10-22"
              const timePart = parts[1]; // "21:00"

              const dateParts = datePart.split('-');
              const timeParts = timePart.split(':');

              if (dateParts.length >= 2 && timeParts.length >= 1) {
                const day = Number(dateParts[dateParts.length - 1]);
                const hour = Number(timeParts[0]);
                return day * 100 + hour;
              }
            }

            return 0;
          };

          return getSortValue(a) - getSortValue(b);
        }

        return 0;
      });
    },


    // 处理图例名称：补位并排序
    processMeterDataForDisplay(meterData) {
      return meterData.map(meter => {
        const originalName = meter.meterMark;
        let displayName = originalName;

        // 匹配模式：纯数字或数字在末尾
        const match = originalName.match(/^(\D*)(\d+)(\D*)$/);

        if (match) {
          const prefix = match[1]; // 非数字前缀，如 "B" 或空
          const numberPart = match[2]; // 数字部分
          const suffix = match[3]; // 非数字后缀，如 "L" 或空

          // 只有当没有前缀且数字部分只有1位时才补位到2位
          if (!prefix && numberPart.length === 1) {
            const paddedNumber = numberPart.padStart(2, '0');
            displayName = paddedNumber + suffix;
          }
          // 其他情况保持原样
        }

        return {
          ...meter,
          displayName: displayName,
          sortKey: this.getSortKey(displayName, originalName)
        };
      }).sort((a, b) => {
        // 按照排序键进行排序
        return a.sortKey.localeCompare(b.sortKey);
      });
    },

    // 生成排序键
    getSortKey(displayName, originalName) {
      // 将名称转换为排序键，确保数字部分按数值排序
      let sortKey = displayName;

      // 提取数字部分并补位到3位用于排序
      const match = originalName.match(/(\D*)(\d+)(\D*)/);
      if (match) {
        const prefix = match[1];
        const numberPart = match[2].padStart(3, '0'); // 补位到3位用于排序
        const suffix = match[3];
        sortKey = prefix + numberPart + suffix;
      }

      return sortKey;
    },

    // 生成颜色序列
    generateColors(count) {
      const baseColors = [
        '#f5222d', '#fa541c', '#fa8c16', '#faad14', '#fadb14',
        '#a0d911', '#52c41a', '#13c2c2', '#1890ff', '#2f54eb',
        '#722ed1', '#eb2f96', '#ff4d4f', '#ff7a45', '#ffa940',
        '#ffec3d', '#bae637', '#73d13d', '#36cfc9', '#40a9ff',
        '#597ef7', '#9254de', '#f759ab', '#ff85c0', '#ff9c6e'
      ];

      const colors = [];
      for (let i = 0; i < count; i++) {
        colors.push(baseColors[i % baseColors.length]);
      }
      return colors;
    },

    getStartTime() {
      if (!this.monitorTime) {
        return new Date().toISOString().replace('T', ' ').substring(0, 19);
      }

      const monitorDate = new Date(this.monitorTime);
      const startDate = new Date(monitorDate);

      if (this.timeType === 'hour') {
        // 向前推一小时，保持完整的时分秒
        startDate.setHours(startDate.getHours() - 1);
      } else {
        // 向前推一天，保持完整的时分秒
        startDate.setDate(startDate.getDate() - 1);
      }

      // 使用本地时间格式化，避免时区问题
      return this.formatLocalDateTime(startDate);
    },

    getEndTime() {
      if (!this.monitorTime) {
        return new Date().toISOString().replace('T', ' ').substring(0, 19);
      }

      const monitorDate = new Date(this.monitorTime);
      // 使用本地时间格式化，避免时区问题
      return this.formatLocalDateTime(monitorDate);
    },

// 使用本地时间格式化，避免时区转换问题
    formatLocalDateTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    handleTimeTypeChange() {
      if (this.monitorTime) {
        this.loadTrendData();
      } else {
        this.$message.warning('请等待实时数据加载完成');
      }
    },

    refreshRealtimeData() {
      this.$emit('refresh');
      this.$message.success('实时数据已刷新');
    },
  },
  watch: {
    detailData: {
      handler(newVal) {
        if (newVal) {
          this.$nextTick(() => {
            this.loadRealtimeChartData();
          });
        }
      },
      deep: true
    }
  }
};
</script>

<style scoped>
/* 样式保持不变 */
.elevator-detail {
  padding: 0;
}

.chart-card {
  margin-bottom: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e8e8e8;
  transition: all 0.3s ease;
}

.chart-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #e8e8e8;
  min-height: 32px;
}

.chart-title {
  font-weight: 600;
  color: #303133;
  font-size: 12px;
}

.time-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-title-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.monitor-time {
  font-size: 11px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid #e8e8e8;
}

.monitor-time i {
  font-size: 12px;
}

@media (max-width: 768px) {
  .el-row {
    margin: 0 !important;
  }

  .el-col {
    margin-bottom: 12px;
  }

  .card-header {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    padding: 6px 10px;
  }

  .time-controls {
    width: 100%;
    justify-content: space-between;
  }

  #realtimeChart,
  #trendChart {
    height: 200px !important;
  }
}

@media (max-width: 480px) {
  .el-col {
    margin-bottom: 10px;
  }

  #realtimeChart,
  #trendChart {
    height: 180px !important;
  }
}
</style>
